 
 <!DOCTYPE html>
 <!--
 	There may be a bug, but don't worry, QiLing(器灵) says that it can work normally!
 -->
 <html>
 	

<head>
	<title>pagetitle</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />	
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	<meta name="msapplication-TileImage" content="i/app-icon72x72@2x.png">
	<meta name="msapplication-TileColor" content="#0e90d2">
	<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
	<link rel="icon" sizes="192x192" href="i/app-icon72x72@2x.png">
	<link rel="icon" type="image/png" href="i/favicon.png">
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>		
	
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="/blog/css/style.css">	
</head>
 <body>	
	
	<header style="background-image: url( https://source.unsplash.com/collection/954550/1920x1080 );">	

	
		<div id="cd-logo"><a href="/blog/"><img src="/blog/img/logo.png" alt="Logo"></a></div>
	
		
		
 		<p class="motto"></p>
	
	
	
		
			<p class="page-name"></p>
		
		
	
</header>

<div id="cd-nav">
	<a href="#0" class="cd-nav-trigger">Menu<span></span></a>

	<nav id="cd-main-nav">
		<ul>
			
      		<li class="fa fa-/">
           		<a href="/blog/blog/" title="主页">主页</a>	
      		</li>
    		
      		<li class="fa fa-/archives">
           		<a href="/blog/blog/archives" title="归档">归档</a>	
      		</li>
    		
      		<li class="fa fa-/categories">
           		<a href="/blog/blog/categories" title="分类">分类</a>	
      		</li>
    		
      		<li class="fa fa-/tags">
           		<a href="/blog/blog/tags" title="标签">标签</a>	
      		</li>
    		
      		<li class="fa fa-/about">
           		<a href="/blog/blog/about" title="关于">关于</a>	
      		</li>
    		
      		<li class="fa fa-/gallery">
           		<a href="/blog/blog/gallery" title="相册">相册</a>	
      		</li>
    		
    		
        	
            	<li><a href="javascript:;" class="popup-trigger" title="Search">搜索</a></li>
        	
        	<li><a href="/blog/" title="home">home</a></li>
        	<li><a href="/blog/archives" title="archive">archive</a></li>
		</ul>
	</nav>
</div>

	
	<main>
	<div class="page-container">
	
	<!-- content srart -->
<div class="am-g am-g-fixed blog-fixed">
    <div class="am-u-md-12 am-u-sm-12">
    	
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/11/hello-world/" itemprop="url">
	<time datetime="2018-08-11T10:39:57.233Z" itemprop="datePublished">
  		2018-08-11
  </time>
</a>    

				
	
		<a href="/blog/2018/08/11/hello-world/" itemprop="url">		
			Hello World		
		</a>
	




				
       			<p>
       				
   						Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/11/hello-world/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/10/博客开发问题记录/" itemprop="url">
	<time datetime="2018-08-10T13:33:36.000Z" itemprop="datePublished">
  		2018-08-10
  </time>
</a>    

				
	
		<a href="/blog/2018/08/10/博客开发问题记录/" itemprop="url">		
			博客开发问题记录		
		</a>
	




				
       			<p>
       				
   						
问题1：主页有样式，文章详情页、归档页等无样式
head.ejs中使用css()函数，而非标签

问题2：如何使用CSS将页脚固定在页面底部
方法W3Cschool

问题3：按月归档

问题4：motto插件不能正确使用
将motto.ejs在页面最后引入即可


	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/10/博客开发问题记录/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/10/歌词/" itemprop="url">
	<time datetime="2018-08-09T16:00:00.000Z" itemprop="datePublished">
  		2018-08-10
  </time>
</a>    

				
	
		<a href="/blog/2018/08/10/歌词/" itemprop="url">		
			歌词		
		</a>
	




				
       			<p>
       				
   						有次潘子喝醉了，突然说，“你知道吗，魔礼海按的是一个Am和弦。”我说：“魔个头，不如魔力红。”潘子说：“我跟你讨论宗教时能不能正经点？”我心想，干，Am和弦很正经吗？人家弹的还是一琵琶…
我好久没见潘子了，不过我见到了魔礼海。在西宁塔尔寺，青海游的第一站。这一路并不轻松。我是临着黑夜从南方出逃的，带着一些风尘与疲惫而这些神佛，全都是从千年的颓驰中踉跄走出，在盛世中抬头，在战争前停步，最终规规整整地	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/10/歌词/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/06/hexo-theme-mom/" itemprop="url">
	<time datetime="2018-08-06T06:13:56.000Z" itemprop="datePublished">
  		2018-08-06
  </time>
</a>    

				
	
		<a href="/blog/2018/08/06/hexo-theme-mom/" itemprop="url">		
			hexo-theme-mom		
		</a>
	




				
       			<p>
       				
   						todo



基本模块
细分
状态




layout
head、header、footer
y


index
index
y


page
page
y


post
post
代码显示问题-y


archive
archive
样式待调整-y


categoty
archive
y


tag
archive
y


扩展模块




comment
gitcomment、valin	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/06/hexo-theme-mom/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/02/Github入门术语/" itemprop="url">
	<time datetime="2018-08-02T11:14:05.000Z" itemprop="datePublished">
  		2018-08-02
  </time>
</a>    

				
	
		<a href="/blog/2018/08/02/Github入门术语/" itemprop="url">		
			Github入门术语		
		</a>
	




				
       			<p>
       				
   						什么是Git 
Git是一个版本控制系统（Version Control System），版本控制即记录一个或若干文件内容变化的情况。Git属于分布式版本控制系统，客户端提取文件时总是镜像的完整仓库。
Repository  
仓库，储存项目的空间。建立项目之前需要建立仓库，一个项目对应一个仓库。
Issues  
针对于项目bug，审查者提出的问题。or审查者希望项目增加新的特性，而提出的建议。	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/02/Github入门术语/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/08/02/gallery-test/" itemprop="url">
	<time datetime="2018-08-01T16:54:37.000Z" itemprop="datePublished">
  		2018-08-02
  </time>
</a>    

				
	
		<a href="/blog/2018/08/02/gallery-test/" itemprop="url">		
			gallery-test		
		</a>
	




				
        			<p>没有文章内容...</p>    		
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/08/02/gallery-test/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/07/31/That-boy/" itemprop="url">
	<time datetime="2018-07-31T15:23:46.000Z" itemprop="datePublished">
  		2018-07-31
  </time>
</a>    

				
	
		<a href="/blog/2018/07/31/That-boy/" itemprop="url">		
			That boy		
		</a>
	




				
       			<p>
       				
   						
 
	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/07/31/That-boy/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/07/30/博客功能扩展/" itemprop="url">
	<time datetime="2018-07-29T16:18:51.000Z" itemprop="datePublished">
  		2018-07-30
  </time>
</a>    

				
	
		<a href="/blog/2018/07/30/博客功能扩展/" itemprop="url">		
			博客功能扩展		
		</a>
	




				
       			<p>
       				
   						任务清单（todo list）

 归档页
 分类页
 标签页
 相册页 2018年7月30日
 搜索页 2018年7月31日
 时间页
 安装hexo-related-popular-posts插件 2018年8月1日
 文章加密访问、前端加密类hexo-encrypt. / hexo-blog-encrypt（废弃的API，放弃折腾）
 hexo-pdf插件：pdf预览
 返回顶部 2018年	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/07/30/博客功能扩展/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/07/26/李白诗选/" itemprop="url">
	<time datetime="2018-07-26T15:58:02.000Z" itemprop="datePublished">
  		2018-07-26
  </time>
</a>    

				
	
		<a href="/blog/2018/07/26/李白诗选/" itemprop="url">		
			李白诗选		
		</a>
	




				
       			<p>
       				
   						《宣州谢朓楼饯别校书叔云 》李白
弃我去者，昨日之日不可留;  
乱我心者，今日之日多烦忧。  
长风万里送秋雁，对此可以酣高楼。  
蓬莱文章建安骨，中间小谢又清发。  
俱怀逸兴壮思飞，欲上青天揽明月。  
抽刀断水水更流，举杯销愁愁更愁。  
人生在世不称意，明朝散发弄扁舟。
	
      				  
        		</p> 
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/07/26/李白诗选/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		
		<article class="am-g blog-entry-article">
			
            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                <img src="/blog/i/f13.jpg" class="am-u-sm-12">
            </div>	
            
 			<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
        		<a href="/blog/2018/07/25/秦时明月/" itemprop="url">
	<time datetime="2018-07-25T15:57:16.000Z" itemprop="datePublished">
  		2018-07-25
  </time>
</a>    

				
	
		<a href="/blog/2018/07/25/秦时明月/" itemprop="url">		
			秦时明月		
		</a>
	




				
        			<p>没有文章内容...</p>    		
        		
        		
      			
          		<span class="continue-read">      	
            		<a href="/blog/2018/07/25/秦时明月/" class="pull-right">
            			read more
            		</a>		
          		<span>
        		         		
			</div>
   		</article>
		     

		
  <ul class="am-pagination">
 			
 			
			
				<li class="am-pagination-next">
					<a href="/blog/page/2/">下一页&raquo;</a>
				</li>
			
  </ul>


        
  
  
	
    </div>
</div>
<!-- content end -->

	<!--图文风格-->

	</div>
	<footer>
	<div class="blog-text-center">
		<div class="social">
				
				
					<a href="http://github.com/" title="Github" target="_blank"><i class="fa fa-github"></i>&nbsp;</a>
					
				
					<a href="http://github.com/" title="Weibo" target="_blank"><i class="fa fa-weibo"></i>&nbsp;</a>
				
				
					<a href="http://github.com/" title="Email" target="_blank"><i class="fa fa-envelope-o"></i>&nbsp;</a>
					
				
					<a href="http://github.com/" title="QQ" target="_blank"><i class="fa fa-qq"></i>&nbsp;</a>
					
				
					<a href="http://github.com/" title="Twitter" target="_blank"><i class="fa fa-twitter"></i>&nbsp;</a>
						
				
		</div>
	</div>
	
	<div  class="blog-text-center">
		<div class="copyright">
		
			&copy; 2017 - 2018, content by John Doe. All Rights Reserved.			       	
		
		</div>
	</div>
	
	<div class="blog-text-center">
		<div class="copyright">
		<a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> Theme <a href="https://github.com/Fechin/hexo-theme-XXX" title="XXX" target="_blank" rel="noopener">XXX</a> by Songci.		
	</div>
	</div>
		

</footer>






	</main>

	
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="/blog/js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="/blog/js/main.js"></script> 
<style>
	.motto {
		color: #000000;
		font-size: 20px;
		margin: 60px 20px 0 20px;
		line-height: 1.4;
		font-family: 'Fang Song', 'Song', 'STSong', sans-serif;
		text-align: center;
	}
</style>


	<script src="/blog/js/motto.js"></script>
	<script>
		$(".motto").html(getMingYanContent());
	</script>	



    <div class="popup search-popup local-search-popup">
      <span class="popup-btn-close">
        ESC
      </span>
      <div class="container">
        <div class="col-md-8 col-md-offset-2">

          <div class="local-search-header clearfix">
              <span class="search-icon"></span>
              <div class="local-search-input-wrapper">
                <input autocomplete="off" placeholder="Search..." type="text" id="local-search-input">
              </div>
          </div>

          <div id="local-search-result"></div>

        </div>
      </div>
  </div>

<script src="/blog/js/ziploader.js"></script>


  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.json";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').fadeOut(300);
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $('.popup').fadeIn(300);
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // get search zip version
    $.get('/blog/searchVersion.txt?t=' + (+new Date()), function(res) {
      if (localStorage.getItem('searchVersion') !== res) {
        localStorage.setItem('searchVersion', res);
        initSearchJson();
      }
    });

    function initSearchJson () {
      initLoad(['/blog/search.zip'], {
        loadOptions: {
          success: function(obj) {
            localStorage.setItem('searchJson', obj['search.json'])
          },
          error: function(e) {
            return console.log(e)
          }
        },
        returnOptions: {
          'json': TYPE_TEXT
        },
        mimeOptions:{
          'json':'application/json'
        }
      })
    }

    // search function;
    var searchFunc = function(search_id, content_id) {
      'use strict';

      isfetched = true;
      var datas = JSON.parse(localStorage.getItem('searchJson'));
      console.log(search_id)
      var input = document.getElementById(search_id);
      var resultContent = document.getElementById(content_id);
      var inputEventFunction = function() {
        var searchText = input.value.trim().toLowerCase();
        var keywords = searchText.split(/[\s\-]+/);
        if (keywords.length > 1) {
          keywords.push(searchText);
        }
        var resultItems = [];
        if (searchText.length > 0) {
          // perform local searching
          datas.forEach(function(data) {
            var isMatch = false;
            var hitCount = 0;
            var searchTextCount = 0;
            var title = data.title ? data.title.trim() : '';
            var titleInLowerCase = title.toLowerCase();
            var content = data.content ? data.content.trim().replace(/<[^>]+>/g,"") : '';
            var contentInLowerCase = content.toLowerCase();
            var articleUrl = decodeURIComponent(data.url);
            var indexOfTitle = [];
            var indexOfContent = [];
            // only match articles with not empty titles
            keywords.forEach(function(keyword) {
              function getIndexByWord(word, text, caseSensitive) {
                var wordLen = word.length;
                if (wordLen === 0) {
                  return [];
                }
                var startPosition = 0, position = [], index = [];
                if (!caseSensitive) {
                  text = text.toLowerCase();
                  word = word.toLowerCase();
                }
                while ((position = text.indexOf(word, startPosition)) > -1) {
                  index.push({position: position, word: word});
                  startPosition = position + wordLen;
                }
                return index;
              }

              indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
              indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
            });
            if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
              isMatch = true;
              hitCount = indexOfTitle.length + indexOfContent.length;
            }

            // show search results

            if (isMatch) {
              // sort index by position of keyword

              [indexOfTitle, indexOfContent].forEach(function (index) {
                index.sort(function (itemLeft, itemRight) {
                  if (itemRight.position !== itemLeft.position) {
                    return itemRight.position - itemLeft.position;
                  } else {
                    return itemLeft.word.length - itemRight.word.length;
                  }
                });
              });

              // merge hits into slices

              function mergeIntoSlice(text, start, end, index) {
                var item = index[index.length - 1];
                var position = item.position;
                var word = item.word;
                var hits = [];
                var searchTextCountInSlice = 0;
                while (position + word.length <= end && index.length != 0) {
                  if (word === searchText) {
                    searchTextCountInSlice++;
                  }
                  hits.push({position: position, length: word.length});
                  var wordEnd = position + word.length;

                  // move to next position of hit

                  index.pop();
                  while (index.length != 0) {
                    item = index[index.length - 1];
                    position = item.position;
                    word = item.word;
                    if (wordEnd > position) {
                      index.pop();
                    } else {
                      break;
                    }
                  }
                }
                searchTextCount += searchTextCountInSlice;
                return {
                  hits: hits,
                  start: start,
                  end: end,
                  searchTextCount: searchTextCountInSlice
                };
              }

              var slicesOfTitle = [];
              if (indexOfTitle.length != 0) {
                slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
              }

              var slicesOfContent = [];
              while (indexOfContent.length != 0) {
                var item = indexOfContent[indexOfContent.length - 1];
                var position = item.position;
                var word = item.word;
                // cut out 100 characters
                var start = position - 20;
                var end = position + 80;
                if(start < 0){
                  start = 0;
                }
                if (end < position + word.length) {
                  end = position + word.length;
                }
                if(end > content.length){
                  end = content.length;
                }
                slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
              }

              // sort slices in content by search text's count and hits' count

              slicesOfContent.sort(function (sliceLeft, sliceRight) {
                if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                  return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                  return sliceRight.hits.length - sliceLeft.hits.length;
                } else {
                  return sliceLeft.start - sliceRight.start;
                }
              });

              // select top N slices in content

              var upperBound = parseInt('2');
              if (upperBound >= 0) {
                slicesOfContent = slicesOfContent.slice(0, upperBound);
              }

              // highlight title and content

              function highlightKeyword(text, slice) {
                var result = '';
                var prevEnd = slice.start;
                slice.hits.forEach(function (hit) {
                  result += text.substring(prevEnd, hit.position);
                  var end = hit.position + hit.length;
                  result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                  prevEnd = end;
                });
                result += text.substring(prevEnd, slice.end);
                return result;
              }

              var resultItem = '';

              if (slicesOfTitle.length != 0) {
                resultItem += "<li><a target='_blank' href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
              } else {
                resultItem += "<li><a target='_blank' href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
              }

              slicesOfContent.forEach(function (slice) {
                resultItem +=  "<p class=\"search-result\">" + highlightKeyword(content, slice) + "...</p>";
              });

              resultItem += "</li>";
              resultItems.push({
                item: resultItem,
                searchTextCount: searchTextCount,
                hitCount: hitCount,
                id: resultItems.length
              });
            }
          })
        };
        if (keywords.length === 1 && keywords[0] === "") {
          resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
        } else if (resultItems.length === 0) {
          resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /> no result </div>'
        } else {
          resultItems.sort(function (resultLeft, resultRight) {
            if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
              return resultRight.searchTextCount - resultLeft.searchTextCount;
            } else if (resultLeft.hitCount !== resultRight.hitCount) {
              return resultRight.hitCount - resultLeft.hitCount;
            } else {
              return resultRight.id - resultLeft.id;
            }
          });
          var searchResultList = '<ul class=\"search-result-list\">';
          resultItems.forEach(function (result) {
            searchResultList += result.item;
          })
          searchResultList += "</ul>";
          resultContent.innerHTML = searchResultList;
        }
      }

      if ('auto' === 'auto') {
        input.addEventListener('input', inputEventFunction);
      } else {
        $('.search-icon').click(inputEventFunction);
        input.addEventListener('keypress', function (event) {
          if (event.keyCode === 13) {
            inputEventFunction();
          }
        });
      }

      // remove loading animation
      $('body').css('overflow', '');

      proceedsearch();
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        $('.sb-close').click();
        searchFunc('local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>






</body>

</html>
